<template>
	<view>
		<view class="img-a">
			<view class="t-b">
				您好，
				<br />
				欢迎使用universe
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<view class="login-icon">
							<uni-icons type="person" size="30"></uni-icons>
						</view>
						<input placeholder="请输入账号"  v-model="user.userLoginName" />
					</view>
					<view class="t-a">
						<view class="login-icon">
							<uni-icons type="contact" size="30"></uni-icons>
						</view>
						<input  class="uni-input" placeholder="请输入密码" :password="showPassword"  v-model="user.userPassword" />
					</view>
					<button @tap="bindLogin()">登 录</button>
					<view class="reg" @tap="reg()">注 册</view>
				</form>
				<view class="t-f"><text>—————— 第三方账号登录 ——————</text></view>
				<view class="t-e cl">
					<view class="t-g" @tap="wxLogin()"><image src="@/static/login/wx.png"></image></view>
					<view class="t-g" @tap="zfbLogin()"><image src="@/static/login/qq.png"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import service from '../../service.js';
	import request from "../../utils/request.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'
	import { getToken,setToken } from '@/utils/auth' 

	export default {
		components: {
			mInput,
			uniIcons,
			uniSection
		},
		data() {
			return {
				user:{
					userLoginName: "",
					userPassword: ""
				},
				providerList: [],
				hasProvider: false,
				positionTop: 0,
				isDevtools: false,
				title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
				phone: '', //手机号码
				yzm: '' ,//验证码
				showPassword: true,
				src: '../../../static/login/eye-1.png',
			}
		},
		computed: mapState(['forcedLogin']),
		methods: {
			...mapMutations(['login']),
			initProvider() {
				const filters = ['weixin', 'qq', 'sinaweibo'];
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (res.provider && res.provider.length) {
							for (let i = 0; i < res.provider.length; i++) {
								if (~filters.indexOf(res.provider[i])) {
									this.providerList.push({
										value: res.provider[i],
										image: '../../static/img/' + res.provider[i] + '.png'
									});
								}
							}
							this.hasProvider = true;
						}
					},
					fail: (err) => {
						console.error('获取服务供应商失败：' + JSON.stringify(err));
					}
				});
			},
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
			async bindLogin() {
				if (this.user.userLoginName.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				if (this.user.userPassword.length < 3) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 3 个字符'
					});
					return;
				}
				var params = {
					userLoginName: this.user.userLoginName,
					userPassword: this.user.userPassword
				}
				let _this = this;
				let resp = await request({
					url: '/system/user/login',
					method: 'post',
					data: params
				})
				
				uni.setStorageSync("userLoginName", this.user.userLoginName);
				uni.setStorageSync("userPassword", this.user.userPassword);
				if(resp.code){
					this.login(resp.data.userName);
					setToken(resp.data.token)
					let a = await _this.getUserInfo();
					uni.reLaunch({
						url: '../main/main',
					});
				}else{
					uni.showToast({
						icon: 'none',
						title: '用户账号或密码不正确',
					});
				}
			},
			getUserInfo(){
				request({
					url: '/system/user/info',
					method: 'post'
				}).then(response => {
					uni.removeStorageSync("USER_INFO")
					uni.setStorageSync("USER_INFO", response.data);
				})
			},
			oauth(value) {
				uni.login({
					provider: value,
					success: (res) => {
						uni.getUserInfo({
							provider: value,
							success: (infoRes) => {
								/**
								 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
								 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
								 */
								this.toMain(infoRes.userInfo.nickName);
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '登陆失败'
								});
							}
						});
					},
					fail: (err) => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
			},

			toMain(userName) {
				debugger
				this.login(userName);
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '../main/main',
					});
				} else {
					uni.navigateBack();
				}

			},
			changePassword: function() {
			    this.showPassword = !this.showPassword;
			},
			//注册按钮点击
			reg() {
				uni.showToast({ title: '注册跳转', icon: 'none' });
			},
			//等三方微信登录
			wxLogin() {
				uni.showToast({ title: '微信登录', icon: 'none' });
			},
			//第三方支付宝登录
			zfbLogin() {
				uni.showToast({ title: '支付宝登录', icon: 'none' });
			}
		},
		onReady() {
			this.initPosition();
			this.initProvider();
			// #ifdef MP-WEIXIN
			this.isDevtools = uni.getSystemInfoSync().platform === 'devtools';
			// #endif
		},
		created() {
			this.user.userLoginName = uni.getStorageSync("userLoginName")
			this.user.userPassword = uni.getStorageSync("userPassword")
		}
	}
</script>


<style>

	
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-image: url(../../static/login/head.png);
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>
